import { ComponentType } from "react";
import { Button as TButton, ButtonProps } from "@tarojs/components";
import { useThemeState } from "../theme";
// import getPx from "../../../utils/getPX";

type TButtonProps = ComponentType<
  ButtonProps & {
    width?: string;
    height?: string;
    bold?: boolean;
    radius?: string;
    style?: React.CSSProperties;
    letterSpacing?: string;
  }
>;

export const Button: TButtonProps = ({
  style,
  bold,
  width,
  height = "46px",
  radius,
  letterSpacing,
  ...props
}) => {
  const { theme } = useThemeState();
  // const getHeight = useMemo(() => `${getPx(height)}px`, [height]);

  return (
    <TButton
      style={{
        width,
        height,
        color: theme.button.color,
        backgroundColor: theme.button.backgroundColor,
        fontWeight: bold ? "bold" : undefined,
        borderRadius: radius,
        letterSpacing,
        textShadow: "1px 1px 1px #000",
        ...style,
      }}
      {...props}
    />
  );
};
